<template>
  <view class="mycart">
    <el-empty v-if="dishArr==null || dishArr.length==0" description="购物车空"></el-empty>

    <view class="main">
      <view class="menu">
        <view class="menu-item" v-for="(item, index) in dishArr" :key="index" @click="clickDish(item)">
          <view class="menu-item-image">
            <image class="image" :src="'/api/images/dish/' + item.dishImage" mode=""></image>
          </view>

          <view class="menu-item-info">
            <view class="name">
              {{item.dishName}}<text class="size">（{{item.dishSize}}）</text>
            </view>
            <view class="num">
              {{item.dishNum}}份
            </view>
            <view class="price">
              ￥{{item.dishPrice.toFixed(1)}}
            </view>
            <view class="discount" v-if="item.discount<1">
              {{item.dishDiscount.toFixed(1)}}折
            </view>
            <image class="delete" src="../../static/index/delete.png" mode="aspectFill" @click="clickDelete()"></image>
            <image class="add" src="../../static/index/add.png" mode="aspectFill" @click="dialogVisible = true"></image>

            <el-dialog title="提示" :visible.sync="dialogVisible" width="85%" :before-close="handleClose">
              <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickOK()">确定</el-button>
              </span>
            </el-dialog>

          </view>
        </view>
      </view>
    </view>

    <view class="submit">
      <view class="total-amount">
        <view class="label">
          合计：
        </view>
        <view class="value">
          ￥{{totalAmount.toFixed(2)}}
        </view>
      </view>
      <el-button @click="submit()">结算</el-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dishArr: [],
        activeDish: null,
        dialogVisible: false,
        num: 1,
        // totalAmount: 0.0
      }
    },
    onLoad() {
      setTimeout(() => {
        this.setDishArr()
      }, 500) // 加时间等待是因为，有些数据没加载，会得到 null
    },
    onShow() {
      this.setDishArr()
    },
    computed: {
      totalAmount() {
        let rs = 0.0
        if (this.dishArr == null || this.dishArr.length == 0) {
          return 0.0
        }
        this.dishArr.forEach((item) => {
          rs += item.dishPrice * item.dishNum
        })
        return rs
      }
    },
    methods: {
      clickDish(item) {
        this.activeDish = item
      },
      setDishArr() {
        uni.request({
          url: '/api/shopping_carts',
          method: 'GET',
          data: {
            consumer_id: uni.getStorageSync('id')
          },
          success: (res) => {
            // console.log(res.data.data)
            this.dishArr = res.data.data
          },
          fail: (res) => {
            console.log(res)
          }
        })
      },
      handleClose(done) {
        done();
      },
      handleChange(value) {
        // console.log(value)
      },
      async clickOK() {
        this.dialogVisible = false
        // console.log(dish)
        // console.log(this.activeDish);
        let dish = this.activeDish
        // console.log(dish);
        uni.request({
          url: '/api/shopping_carts',
          method: 'PUT', // 修改 put 请求
          data: {
            id: dish.id,
            dishName: dish.dishName,
            dishSize: dish.dishSize,
            dishPrice: dish.dishPrice,
            dishNum: this.num,
            dishImage: dish.dishImage,
            dishDiscount: dish.dishDiscount,
            dishId: dish.dishId,
            consumerId: dish.consumerId
          },
          success: (res) => {
            this.setDishArr()
            console.log(res.data);
          }
        })

        // 重置数量
        this.num = 1
      },
      clickDelete() {
        setTimeout(() => {
          let dish = this.activeDish
          uni.request({
            url: '/api/shopping_carts/' + dish.id,
            method: 'DELETE', // 删除请求
            success: (res) => {
              this.setDishArr()
              console.log(res.data);
            }
          })
        }, 100)
      },
      submit() {
        // 提交订单
        if (uni.getStorageSync('id') == "") {
          this.$message.error('没有登录')
          return
        }

        if (this.totalAmount <= 0.0) {
          this.$message.info('没有点餐记录，请点餐')
          return
        }

        uni.request({
          url: '/api/shopping_carts/submit',
          method: 'POST',
          data: {
            consumerId: uni.getStorageSync('id')
          },
          success: (res) => {
            this.$message.success('提交订单成功')
            this.dishArr = []
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .main {
    display: flex;

    .menu {
      flex-grow: 1;
      // overflow: auto;
      // height: 100vh;
      background-color: #f6f6f6;
    }

    .menu-item {
      min-height: 200rpx;
      margin: 20rpx 0;
      background-color: #fff;
      padding: 15rpx 40rpx;
      display: flex;
      align-items: center;

      &:nth-child(1) {
        margin-top: 0;
      }

      .menu-item-image {
        position: relative;

        .image {
          width: 150rpx;
          height: 150rpx;
        }

        .hotSales {
          width: 60rpx;
          height: 60rpx;
          position: absolute;

          top: -10rpx;
          right: -10rpx;

        }
      }

      .menu-item-info {
        padding: 15rpx;
        flex-grow: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 2rem 1rem 1rem;

        .name {
          grid-column: 1 / 4;
          grid-row: 1 / 2;
          font-size: 1.2rem;

          // 文字超出用...表示
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .size {}
        }



        .price {
          color: #fe4d46;
          grid-column: 1 / 2;
          grid-row: 2 / 3;
        }

        .discount {
          color: #fe4d46;
          grid-column: 2 / 3;
          grid-row: 2 / 3;
        }

        .delete {
          grid-column: 3 / 4;
          grid-row: 2 / 3;
          width: 40rpx;
          height: 40rpx;
        }

        .add {
          grid-column: 4 / 5;
          grid-row: 2 / 3;
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }

  .submit {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 100rpx;
    left: 0;
    right: 0;
    background-color: #fff;

    .total-amount {
      display: flex;
      // flex-basis: 200rpx;
      align-items: center;

      .label {
        margin: 0 30rpx;
        font-size: 1.1rem;
        font-weight: 900;
      }

      .value {
        font-size: 1.2rem;
        color: #fe4d46;
      }
    }

    // 饿了么UI
    .el-button {
      background: #ffd101;
      color: #fff;
      font-weight: 900;
      font-size: 1.1rem;
    }
  }
</style>